<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    :close-on-click-modal="false"
    append-to-body
    width="800"
    class="editDialog"
    align-center
  >
    <el-form
      inline
      class="basicForm"
      label-position="right"
      v-model="formObj"
      label-width="120px"
    >
      <el-form-item label="IP:PORT" class="full-width-item">
        <el-input v-model="formData.mqttUri"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="formData.mqttUser"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.mqttPwd"></el-input>
      </el-form-item>
      <el-form-item label="服务质量">
        <el-select v-model="formData.mqttQos" class="select">
          <el-option
            v-for="item in formData.messageLevelList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分片大小">
        <el-select v-model="formData.shardSize" class="select">
          <el-option
            v-for="item in formData.shardList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="消息主题" class="full-width-item">
        <el-input v-model="formData.mqttTopic"> </el-input>
      </el-form-item>
      <el-form-item label="AD灵敏度" class="full-width-item">
        <el-input v-model="formData.adResolusion"> </el-input>
      </el-form-item>
      <el-form-item label="BIN文件存储目录" class="full-width-item">
        <el-input v-model="formData.rootDir"> </el-input>
      </el-form-item>
      <el-form-item label="备注" class="full-width-item">
        <el-input
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10 }"
          v-model="formData.remark"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button  @click="dialogVisible = false" auto-insert-space
        >取消</el-button
      >
      <el-button type="primary" @click="onConfirm" auto-insert-space
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

let dialogVisible = ref(false);
import {ElMessage} from "element-plus";

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

import { saveMqTable } from "../../utils/requests";

let dialogTitle = ref("");

let formData = ref({
  mqttUri: "",
  mqttUser: "",
  mqttQos: "",
  adResolusion: "",
  mqttTopic: "",
  rootDir: "",
  shardSize: "",
  remark: "",
  mqttPwd: "",
  shardList: [],
  messageLevelList: [],
  id: ""
});

const openDialog = (params) => {
  dialogVisible.value = true;

  formData.value.messageLevelList = params.messageLevelList;
  formData.value.shardList = params.shardList;

  if (params.rowData) {
    dialogTitle.value = "修改";
    formData.value.mqttUri = params.rowData.mqttUri;
    formData.value.mqttUser = params.rowData.mqttUser;
    formData.value.mqttQos = "" + params.rowData.mqttQos;
    formData.value.adResolusion = params.rowData.adResolusion;
    formData.value.mqttTopic = params.rowData.mqttTopic;
    formData.value.rootDir = params.rowData.rootDir;
    formData.value.shardSize = "" + params.rowData.shardSize;
    formData.value.remark = params.rowData.remark;
    formData.value.mqttPwd = params.rowData.mqttPwd;
    formData.value.id = params.rowData.id;
  } else {
    dialogTitle.value = "新增";
    formData.value.mqttUri = "";
    formData.value.mqttUser = "";
    formData.value.mqttQos = "";
    formData.value.adResolusion = "";
    formData.value.mqttTopic = "";
    formData.value.rootDir = "";
    formData.value.shardSize = "";
    formData.value.remark = "";
    formData.value.mqttPwd = "";
    formData.value.id = "";
  }
};

const onConfirm = () => {
  saveMqTable({ ...formData.value }).then(() => {
    emits("confirm");
    ElMessage.success('修改成功')
    dialogVisible.value = false;
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.title {
  display: flex;
  line-height: 40px;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;

  &:before {
    content: "";
    width: 5px;
    height: 20px;
    background: #409eff;
    margin-right: 10px;
  }
}

.full-width-item {
  width: calc(100% - 20px) !important; /* 让整个 el-form-item 占据整行 */
}

.basicForm,
.selectionForm {
  > * {
    width: calc(50% - 20px);
    margin-right: 20px;

    :deep(.el-date-editor) {
      width: 100%;
    }
  }

  > .long {
    width: calc(100% - 20px);
    margin-right: 20px;
  }

  .sumUnit {
    .text {
      margin-right: 10px;
    }
  }
}

.opt {
  margin-top: 50px;
  text-align: right;
  padding-right: 20px;
}
</style>
